<template>
  <div id="app">
    <!--  第一步:先获取到图片的地址 -->
    <img :class="myImgClass" v-for="img in images" :src="img.imageUrl"/>
    <button :class="btnClass" @click="loadImg">再来一波</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      images: [],
      myImgClass: "myImg",
      btnClass: "myBtn"
    }
  },
  mounted() {
    this.loadImg();
  },
  methods: {
    loadImg: function () {
      // this表示vue对象，赋值给局部变量vm
      let vm = this;
      //使用axios发送请求
      //then 请求成功回调  res：请求成功的响应对象
      //catch 请求出现异常的回调  err：请求失败的异常对象
      this.axios({
        url: 'https://www.mxnzp.com/api/image/girl/list/random?app_id=ypawwbi0iheosmql&app_secret=dGdHaHBkZllocDRCNjdnOU5IZmR4UT09',
        method: 'GET'
      }).then(function (res) {
        console.log(res.data.data);
        //这里不能直接用this.images获取vue属性，因为此时为回调，此时的this表示axios，不是vue
        // vm.images = res.data.data;
        // vm.images 获取vue中的images变量
        vm.images.push(...res.data.data);
      }).catch(function (err) {
        console.log(err)
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.myImg {
  width: 192px;
  height: 108px;
  border: gray 1px solid;
  margin: 4px 8px;
  border-radius: 10px;
}

.myBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .0);
  color: gray;
}
</style>
